<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title>聊天记录</title>

		<link rel="stylesheet" href="../../../layui.css" />
		<style>
			body .layim-chat-main {
				height: auto;
			}
		</style>
	</head>
	<body>
		<div class="layim-chat-main">
			<ul id="LAY_view"></ul>
		</div>
		<div id="LAY_page" style="margin: 0 10px;"></div>
		<textarea title="消息模版" id="LAY_tpl" style="display:none;">
		{{# layui.each(d.data, function(index, item){
		  if(item.id == parent.layui.layim.cache().mine.id){ }}
		    <li class="layim-chat-mine"><div class="layim-chat-user"><img src="{{ item.avatar }}"><cite><i>{{ layui.data.date(item.timestamp) }}</i>{{ item.username }}</cite></div><div class="layim-chat-text">{{ layui.layim.content(item.content) }}</div></li>
		  {{# } else { }}
		    <li><div class="layim-chat-user"><img src="{{ item.avatar }}"><cite>{{ item.username }}<i>{{ layui.data.date(item.timestamp) }}</i></cite></div><div class="layim-chat-text">{{ layui.layim.content(item.content) }}</div></li>
		  {{# }
		}); }}
		</textarea>

		<script src="../../../../layui.js"></script>
		<script src="../../../../jquery-1.11.3.js"></script>
		<script src="../../../../jquery.cookie.js"></script>
		<script>
			layui.use(['layim', 'laypage','layer'], function() {
				var layim = layui.layim,
					layer = layui.layer,
					laytpl = layui.laytpl,
					$ = layui.jquery,
					laypage = layui.laypage;
				//聊天记录的分页此处不做演示，你可以采用laypage，不了解的同学见文档：http://www.layui.com/doc/modules/laypage.html
				//开始请求聊天记录
				var param = location.search //获得URL参数。该窗口url会携带会话id和type，他们是你请求聊天记录的重要凭据
				//loading
				var index = layer.load(1, {
				  shade: [0.1,'#fff'] //0.1透明度的白色背景
				});
				var a = $(".layim-chat.layim-chat-friend.layui-show .layim-chat-other .layim-chat-username",parent.document).html();
				if(a){
					a = a.trim();
				}
				var b = $("#layui-layim .layui-layim-main .layui-layim-info .layui-layim-user",parent.document).html();
				if(b){
					b = b.trim();
				}
				var c = $(".layim-chat.layim-chat-group.layui-show .layim-chat-title .layim-chat-username", parent.document).html();
				if(c){
					c = c.substring(0, c.indexOf("<")).trim();
				}
				if(a && b && !c){
					var reqData = {
						type: "friend",
						id1: a + '+' + b,
						id2: b + '+' + a
					}
				}else{
					var reqData = {
						type: "group",
						id: c,
					}
				}
				//实际使用时，下述的res一般是通过Ajax获得，而此处仅仅只是演示数据格式
				$.post("/user/chatlog", reqData, function(res){
					layer.close(index);
					if(res.code == 0){
						var arr = res.data;
						if(arr.length == 0){
							$('#LAY_view').html("暂无聊天记录");
						}else{
							for (var i = 0; i < arr.length; i++) {
								arr[i].content = decodeURIComponent(arr[i].content);
							}
							var html = laytpl(LAY_tpl.value).render({
								data: arr
							});
							$('#LAY_view').html(html);
						}
					}else{
						var html = '<blockquote class="layui-elem-quote">暂无聊天记录</blockquote>'
						$('#LAY_view').html(html);
					}
				})
			});
		</script>
	</body>
</html>